<template>
  <div data-selection-area class="card">
    <a-card
      v-if="currentFolder && currentFolder.length > 0"
      :loading="folderLoading"
      :bordered="false"
    >
      <ul>
        <li
          :data-selection="item.key"
          v-for="(item, key) in fileData"
          draggable
          :key="key"
          :class="[{ active: selectedFolders.includes(item.key) }, 'flex flex-col']"
          @click.stop="selectItem(item)"
          @dblclick="openFile(item)"
          @contextmenu.stop="fileContextmenu(item)"
        >
          <FileRender :filename="item.key" :type="item.type" :src="item.src" />
          <div class="folder-title" v-if="!item.edit">
            <a-tooltip placement="bottom" :title="item.title">
              <div class="text-selected-none">
                {{ item.title }}
              </div>
            </a-tooltip>
          </div>
          <div class="input" v-else>
            <input
              @keydown.enter="onConfirm(item)"
              type="text"
              ref="inputRefs"
              @blur="onConfirm(item)"
              v-model="editingFile"
            />
          </div>
        </li>
      </ul>
    </a-card>
    <a-empty v-else />
  </div>
</template>

<script setup lang="ts">
import { createFile } from '@/api/modules/tool/file/file';
import FileRender from '@/views/components/file-render/FileRender.vue';
import { selectionKeys } from '@/views/selector/selection/data';
import { useEventBus, useMagicKeys } from '@vueuse/core';
import type { DataNode } from 'ant-design-vue/es/tree';
import { concatWithSeparator, loadPath, openFile, selectItem } from '../../../data/action';
import { fileContextmenu } from '../../../data/contextmenu';
import {
  currentFolder,
  currentPath,
  editingFile,
  folderLoading,
  selectedFile,
  selectedFolders,
} from '../../../data/data';
import { renameForFile } from '../../../data/file.curd';
import { FOLDER_BUS } from '../data/config';

const bus = useEventBus(FOLDER_BUS);

const { f2 } = useMagicKeys();
const inputRefs = ref<HTMLInputElement[]>();

watch(
  selectionKeys,
  () => {
    selectedFolders.value = Array.from(selectionKeys.value);
  },
  {
    immediate: true,
    deep: true,
  },
);
bus.on(e => {
  if (e === 'rename') {
    selectedFile.value!.edit = true;
  } else if (e === 'create') {
    onConfirm(selectedFile.value as any);
  }
});

const onConfirm = async (item: DataNode) => {
  item.edit = false;
  if (inputRefs.value) {
    if (item.isNew) {
      await createFile(concatWithSeparator(currentPath.value, editingFile.value), item.type);
    } else await renameForFile(`${item.title}`, editingFile.value);
    loadPath();
  }
};
const fileData = computed(() => {
  return currentFolder.value.map((e: any) => {
    if (typeof e.edit === 'undefined') e.edit = false;
    return e;
  });
});
watch(
  selectedFile,
  () => {
    nextTick(() => {
      // @ts-ignore
      if (inputRefs.value && selectedFile.value?.edit) {
        inputRefs.value[0]?.select();
      }
    });
  },
  {
    deep: true,
    immediate: true,
  },
);
watch(
  f2,
  v => {
    if (v) {
      // @ts-ignore
      selectedFile.value.edit = true;
      nextTick(() => {
        if (inputRefs.value) {
          inputRefs.value[0]?.select();
          editingFile.value = selectedFile.value?.title;
        }
      });
    }
  },
  {
    deep: true,
  },
);
</script>

<style lang="scss" scoped>
@import './card.scss';
</style>
